<script setup>
import { ref, onMounted } from 'vue'
import LineChart from '../components/Charts/LineChart.vue'
import PieChart from '../components/Charts/PieChart.vue'
import HistogramChart from '../components/Charts/HistogramChart.vue'
import { getBedUsage } from '@/api/bed'
import { getAdmissionTrend } from '@/api/hospitalizationRecord'
import { getDepartmentStats, getDepartmentIncome } from '@/api/department'
import { getPatientStats, getPatientGender } from '@/api/patient'

// 住院人数趋势数据
const patientTrend = ref([])

// 床位使用率数据
const bedUsageData = ref([])

// 科室数据
const departmentData = ref([
  {
    name: '内科',
    currentPatients: 68,
    totalBeds: 80,
    waiting: 3,
    todayAdmission: 5,
    todayDischarge: 4
  },
  {
    name: '外科',
    currentPatients: 45,
    totalBeds: 60,
    waiting: 2,
    todayAdmission: 3,
    todayDischarge: 2
  },
  {
    name: '儿科',
    currentPatients: 28,
    totalBeds: 40,
    waiting: 1,
    todayAdmission: 2,
    todayDischarge: 3
  },
  {
    name: '妇产科',
    currentPatients: 35,
    totalBeds: 50,
    waiting: 4,
    todayAdmission: 6,
    todayDischarge: 5
  },
  {
    name: '骨科',
    currentPatients: 42,
    totalBeds: 45,
    waiting: 5,
    todayAdmission: 2,
    todayDischarge: 1
  },
  {
    name: '神经科',
    currentPatients: 38,
    totalBeds: 40,
    waiting: 2,
    todayAdmission: 1,
    todayDischarge: 2
  }
])

// 男女比例
const genderData = ref([
  {
    name: '女',
    value: 1
  },
  {
    name: '男',
    value: 2
  }
])

const incomeData = ref([
  { name: '内科', income: 19 },
  { name: '外科', income: 1055 },
  { name: '骨科', income: 0 },
  { name: '神经科', income: 0 },
  { name: '妇产科', income: 0 },
  { name: '儿科', income: 0 }
])

// 统计数据
const statistics = ref([
  {
    title: '在院病人',
    number: 256
  },
  {
    title: '今日入院',
    number: 23
  },
  {
    title: '今日出院',
    number: 18
  }
])

// 计算进度条样式类
const getProgressClass = (ratio) => {
  if (ratio >= 0.9) return 'critical'
  if (ratio >= 0.75) return 'warning'
  return 'normal'
}

onMounted(async () => {
  console.log('dashboard')

  // 病人统计数据
  const stats = await getPatientStats()
  statistics.value = [
    {
      title: '在院病人',
      number: stats.data.totalPatientsInHospital
    },
    {
      title: '今日入院',
      number: stats.data.admissionTodayCount
    },
    {
      title: '今日出院',
      number: stats.data.dischargeTodayCount
    }
  ]

  // 床位使用率数据
  const bedUsage = await getBedUsage()
  bedUsageData.value = bedUsage.data.map((item) => {
    return {
      name: item.status,
      value: item.number
    }
  })

  // 住院人数趋势数据
  const admissionTrend = await getAdmissionTrend()
  patientTrend.value = admissionTrend.data.map((item) => {
    return {
      // 日期格式为 yyyy-MM-dd，需要转换为 yyyy-MM
      date: item.date.slice(0, 7),
      count: item.count
    }
  })

  // 科室数据
  const departmentStats = await getDepartmentStats()
  departmentData.value = departmentStats.data

  // 男女比例
  const patientGender = await getPatientGender()
  genderData.value = patientGender.data.map((item) => {
    return {
      name: item.gender,
      value: item.count
    }
  })

  // 科室收入数据
  const departmentIncome = await getDepartmentIncome()
  incomeData.value = departmentIncome.data.map((item) => {
    return {
      name: item.deptName,
      income: item.income
    }
  })
})
</script>

<template>
  <div class="dashboard">
    <!-- 显示统计卡片 -->
    <div class="statistics">
      <overview-card
        class="stat-card"
        v-for="stat in statistics"
        :key="stat.title"
      >
        <h3>{{ stat.title }}</h3>
        <p class="number">{{ stat.number }}</p>
      </overview-card>
    </div>

    <!-- 统计数据图表区 -->
    <div class="charts-container">
      <overview-card class="chart-card">
        <h3>住院人数趋势</h3>
        <LineChart :data="patientTrend" />
      </overview-card>
      <overview-card class="chart-card">
        <h3>床位使用率分布</h3>
        <PieChart :data="bedUsageData" />
      </overview-card>
      <overview-card class="chart-card">
        <h3>科室收入统计</h3>
        <HistogramChart :data="incomeData" />
      </overview-card>
      <overview-card class="chart-card">
        <h3>男女比例</h3>
        <PieChart :data="genderData" />
      </overview-card>
    </div>

    <!-- 科室情况概览 -->
    <overview-card class="department-overview">
      <h3>科室住院情况</h3>
      <div class="department-grid">
        <div
          v-for="dept in departmentData"
          :key="dept.name"
          class="department-card"
        >
          <div class="dept-header">
            <span class="dept-name">{{ dept.deptName }}</span>
            <span class="dept-count"
              >{{ dept.currentPatients }}/{{ dept.totalBeds }}</span
            >
          </div>
          <div class="progress-bar">
            <div
              class="progress"
              :style="{
                width: `${(dept.currentPatients / dept.totalBeds) * 100}%`
              }"
              :class="getProgressClass(dept.currentPatients / dept.totalBeds)"
            ></div>
          </div>
          <div class="dept-stats">
            <div class="stat-item">
              <span>今日入院</span>
              <span>{{ dept.todayAdmission }}</span>
            </div>
            <div class="stat-item">
              <span>今日出院</span>
              <span>{{ dept.todayDischarge }}</span>
            </div>
          </div>
        </div>
      </div>
    </overview-card>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;
@use 'sass:color';

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.statistics {
  @include grid-25-1_5;
  margin-bottom: 2rem;

  .stat-card {
    padding-left: 3rem;
    h3 {
      margin: 0;
    }

    .number {
      font-size: 2.4rem;
      font-weight: 600;
      margin: 0.5rem 0;
      color: $color-primary-dark;
    }
  }
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 2rem;

  .chart-card {
    &:hover {
      transform: none;
    }
  }
}

.department-overview {
  .department-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .department-card {
    background-color: $color-white-1;
    padding: 1rem;
    border-radius: 6px;

    .dept-header {
      @include flexSpaceBetweenCenter;
      margin-bottom: 1rem;

      span {
        font-size: 1.1rem;
      }

      .dept-name {
        font-weight: 500;
      }

      .dept-count {
        color: $color-grey-1;
      }
    }

    .progress-bar {
      height: 0.8rem;
      background-color: #e9ecef;
      background-color: color.adjust($color-white-1, $lightness: -8%);
      border-radius: 4px;
      margin-bottom: 1rem;

      .progress {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;

        &.normal {
          background-color: $color-normal;
        }

        &.warning {
          background-color: $color-warning;
        }

        &.critical {
          background-color: $color-critical;
        }
      }
    }

    .dept-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.9rem;

        span:first-child {
          color: $color-grey-1;
          font-size: 1rem;
        }

        span:last-child {
          font-weight: 500;
          font-size: 1.1rem;
        }
      }
    }
  }

  &:hover {
    transform: none !important;
  }
}
</style>
